<template>
	<!-- 接受参数
	animationData:动画数据
	vote选项数据 
	@selectVote点击事件
	-->
	<view class="vote">
		<view class="ctitle" style="">投票选项(单选)</view>
		<view class="select">
			<view :class="item.selected?'skillbar active':'skillbar'" v-for="(item,index) in voteOptionList" :key="index"
				@click="selectVote(item)">
				<view class="skillbar-title"><text>{{item.name}}</text></view>
				<view :class="item.selected?'active':'skillbar-bar'" :animation="animationData[index]"></view>
				<view class="skillbar-poll">票数：{{item.votes}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			animationData: {
				type: Array
			},
			voteOptionList: {
				type: Array
			}
		},
		data() {
			return {

			};
		},
		methods: {
			selectVote(item) {
				this.$emit("selectVote", item);
			}
		}
	}
</script>

<style scoped lang="scss">
	// 投票按钮
	.vote {

		// 头部
		.ctitle {
			height: 40px;
			background-color: #eee;
			color: #B0B0B0;
			line-height: 40px;
			text-indent: 20rpx;
		}

		// 底部选择
		.select {
			margin: 20rpx;
		}

		.skillbar {
			position: relative;
			margin-bottom: 10px;
			background: #eee;
			border-radius: 3px;
			height: 70rpx;
			line-height: 70rpx;

			.skillbar-title {
				position: absolute;
				font-weight: 700;
				color: #fff;
				text-indent: 20rpx;
			}

			// 动画%栏
			.skillbar-bar {
				height: 70rpx;
				width: 0px;
				background: #cbcbcb;
				border-radius: 8rpx;
			}

			.skillbar-poll {
				position: absolute;
				right: 10px;
				top: 0;
				color: rgba(0, 0, 0, .4)
			}
		}

		.active {
			border: $echo-main-color solid 1px;
			border-top: $echo-main-color solid 0px;
		}

	}
</style>
